<template>
  <div class="login">
    <!-- 导航栏 -->
    <van-nav-bar title="用户登录"/>
    <!-- 输入框 -->
    <!-- validate-first 是否在某一项校验不通过时停止校验, 默认是false -->
    <van-form validate-first @failed="onFailed" @submit="login">
    <van-cell-group>
      <van-field
        label="手机号"
        required
        placeholder="请输入手机号"
        :rules="[{ pattern:/\d{11}/, message: '请输入正确的手机号' }]"
        v-model.trim="mobile"/>
     </van-cell-group>
     <van-cell-group>
       <van-field
        v-model.trim="code"
        type="password"
        label="密码"
        required
        :rules="[{ pattern:/\d{6}/, message: '请输入正确的密码' }]"
        placeholder="请输入密码"/>
    </van-cell-group>
     <!-- 按钮 -->
    <div class="btn-wrap">
      <van-button round block type="info" native-type="submit" class="btn">登录</van-button>
    </div>
     </van-form>
      <!-- <van-button @click="GetProfile" type="info">测试获取用户的个人信息{{$store.state.tokenInfo.token?'登陆了':'没有登录'}}</van-button> -->
  </div>
</template>

<script>
import { login, getProfile, getInfo } from '@/api/user'
export default {
  name: 'Login',
  data () {
    return {
      mobile: '13912345678',
      code: '246810',
      // 验证错误提示
      mobile_errmsg: '',
      code_errmsg: ''
      // pattern: /\d{6}/
    }
  },
  methods: {
    // 有效性验证 (vant 自带的form验证功能来做校验)
    onFailed (errorInfo) {
      console.log('failed', errorInfo)
    },
    validate () {
      // 如果验证通过就返回true,否则就返回false
      if (this.mobile === '') {
        // 是否是合法手机号
        this.mobile_errmsg = '请输入手机号'
        return false
      } else {
        this.mobile_errmsg = ''
      }

      if (this.code === '') {
        this.code_errmsg = '请输入验证码'
        return false
      } else {
        this.code_errmsg = ''
      }
      return true
    },
    async GetProfile () {
      // 调用接口，获取用户的个人信息
      await getProfile()
    },
    check () {
      // 如果校验不通过，返回false
      this.mobile_errmsg = this.mobile === '' ? '请输入正确的手机号' : ''
      this.code_errmsg = this.code === '' ? '请输入正确的密码' : ''
      if (this.mobile === '') {
        return false
      }
      if (this.code === '') {
        return false
      }
      return true
    },
    // 点击登录
    async login () {
      // 检验（验证用户输入数据的有效性）
      /* if (!this.check()) {
        console.log('没有通过验证')
        return
      } */

      // 提示登陆中
      this.$toast.loading({
        duration: 0,
        mask: true,
        message: '登陆中'
      })
      try {
        const result = await login(this.mobile, this.code)
        // 登录成功之后，后台返回的数据
        // 1.保存token 到vuex (所有的组件都可以访问这个数据)
        //    在组件中调用mutations
        // console.log(result.data.data)
        this.$store.commit('setTokenInfo', result.data.data)
        // await ajax.post('/app/v1_0/authorizations', {
        //   mobile: mobile,
        //   code: code
        // })
        // 再发请求 获取个人信息
        const res = await getInfo()
        const user = res.data.data
        // 保存用户基本信息：id，姓名,头像信息 到vuex
        this.$store.commit('setUserInfo', {
          id: user.id,
          name: user.name,
          photo: user.photo
        })
        // 会覆盖上一个 toast提示
        this.$toast.success('登录成功')
        // 登录成功，跳转
        // 根据当前路由参数，决定跳到哪里去
        const backto = this.$route.query.backto || '/'
        this.$router.push(backto)
      } catch (e) {
        console.log(e)
        this.$toast.fail('登录失败')
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .login{
    .btn-wrap{
      padding:20px;
      .btn{
        width: 100%;
        background-color:#6db4fd;
        color:#fff;
      }
    }
  }
</style>
